<template>
  <div class="account-info">
    <unify-header></unify-header>
    <div class="container" ref="container">
      <div class="wrapper">
        <div class="main">
          <h2 class="title">账户资料</h2>
          <el-form ref="user_msg" :rules="rules" :model="user_msg" label-width="80px">
            <el-form-item prop="nickname" label="昵称">
              <el-input :minlength="2" :maxlength="6" v-model="user_msg.nickname"></el-input>
            </el-form-item>
            <el-form-item label="签名">
              <el-input type="textarea" v-model="user_msg.signature"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio v-model="user_msg.sex" label="1">男</el-radio>
              <el-radio v-model="user_msg.sex" label="2">女</el-radio>
            </el-form-item>
            <el-form-item label="生日">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="user_msg.birthday"
                                style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
            <!--<el-form-item v-model="user_msg.email" prop="email" label="邮箱">-->
              <!--<el-input v-model="user_msg.email"></el-input>-->
            <!--</el-form-item>-->
          </el-form>
          <form v-DomFILE id="frm_identityA" action="" enctype="multipart/form-data">
            <div class="Icon avatar-uploader">
              <div :style="{backgroundImage: 'url(\''+imageUrl+'\')'}" onclick="getElementById('inputfile').click()" class="Icon-img m">
                <!--<img :src="imageUrl" class="avatar">-->
                <i v-if="!imageUrl" class="el-icon-plus avatar-uploader-icon"></i>
              </div>
              <input type="file" name="file" style="opacity:0;filter:alpha(opacity=0);" id="inputfile"/>
              <input type="hidden" name="utoken" v-model="utoken"/>
            </div>
          </form>
          <el-button type="danger" class="save-btn" @click="onSubmit('user_msg')">保存</el-button>
        </div>
        <left-menu selected="account"></left-menu>
      </div>
    </div>
    <unify-footer></unify-footer>
  </div>
</template>

<script type="text/ecmascript-6">
  import Header from '../../components/header/header.vue'
  import Footer from '../../components/footer/footer.vue'
  import LeftMenu from '../../components/center/menu.vue'
  import Api from '@/api.js'
  import directive from '@/directive.js'

  export default {
    data: function () {
      return {
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        headersImg: {},
        imageUrl: '',
        utoken: '',
        user_msg: {},
        rules: {
          nickname: [
            {required: true, message: '请输入昵称', trigger: 'blur'},
            {min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur'}
          ],
          email: [
            {type: "email", max: 10, message: '邮箱格式错误', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      onSubmit: function () {
//        console.log(formName)
//        this.$refs[this.user_msg].validate((valid) => {
//          if (valid) {
//            alert('submit!')
//          } else {
//            console.log('error submit!!')
//            return false
//          }
//        })
        //暂时不验证
//        保存个人信息
//        edit_user_msg.utoken
        this.user_msg.utoken = this.utoken
        var d = new Date(this.user_msg.birthday)
        var youWant = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
        this.user_msg.birthday = youWant
        Api.userInfoList.edit_user_msg(this.user_msg).then(res => {
          if (res.data.status === 'OK') {
            this.$message({
              showClose: true,
              iconClass: 'atrup_Message',
              message: '保存成功 !',
              type: 'success'
            })
            document.querySelector(".unify-header .nickname").innerHTML = this.user_msg.nickname
            localStorage.setItem("userName", this.user_msg.nickname)
          } else {
            this.$message({
              showClose: true,
              iconClass: 'atrup_Message',
              message: res.data.message,
              type: 'success'
            })
          }
        })
      },
      imgUpload: function () {
      }
    },
    components: {
      'unify-header': Header,
      'unify-footer': Footer,
      'left-menu': LeftMenu
    },
    watch: {},
    mounted: function () {
      //获取用户个人信息
      Api.userInfoList.user_msg({"passId": localStorage.getItem("userDbId")}).then(res => {
        this.user_msg = res.data.data
        this.imageUrl = res.data.data.photoThumbUrl
      })
      this.setMinHeight(this.$refs.container, document.body.clientHeight - 50 - 132)
      this.utoken = localStorage.getItem("userDbId")
    },
    created: function () {
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/sass">

  .account-info {
    .wrapper {
      width: 1152px;
      margin: 0 auto;
      overflow: hidden;
    }
    .container {
      padding: 14px 0 92px;
      background: #f1f1f1;
    }
    .main {
      position: relative;
      width: 960px;
      min-height: 668px;
      float: right;
      border-radius: 5px;
      border: 1px solid #dedede;
      background: #fff;
      h2.title {
        padding-left: 30px;
        font-size: 16px;
        line-height: 55px;
        border-bottom: 1px solid #DEDEDE;
      }
      .el-form {
        width: 527px;
        margin-top: 20px;
      }
      .save-btn {
        display: block;
        padding: 8px 2em;
        margin: 60px 0 0 78px;
        background: #a00912;
        border: 0;
        &:hover {
          background: #c51b25;
        }
      }
      .avatar-uploader {
        position: absolute;
        top: 120px;
        right: 100px;
        width: 120px;
        height: 215px;
        &:hover {
          > .Icon-img {
            border: 1px dashed #20a0ff;
            cursor: pointer;
          }
          i {
            color: #20a0ff;
          }
        }
      }
      .Icon-img {
        width: 120px;
        height: 120px;
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        border: 1px dashed #d9d9d9;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50%;
      }
      .Icon-btn {
        width: 118px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #A00912;
        background: white;
        border: 1px solid #a0a0a0;
        border-radius: 4px;
        margin-top: 60px;
        cursor: pointer;
        > input {
          opacity: 0;
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 122px;
      }
      .avatar {
        width: 122px;
        height: 122px;
        display: block;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }

  .el-picker-panel {
    width: 350px !important;
  }
</style>


<!--<style lang="scss" type="text/scss" rel="stylesheet/sass">-->
<!--.account-info {-->
<!--.wrapper {-->
<!--width: 1152px;-->
<!--margin: 0 auto;-->
<!--overflow: hidden;-->
<!--}-->
<!--.container {-->
<!--padding: 14px 0 92px;-->
<!--background: #f1f1f1;-->
<!--}-->
<!--.main {-->
<!--position: relative;-->
<!--width: 960px;-->
<!--min-height: 668px;-->
<!--float: right;-->
<!--border-radius: 5px;-->
<!--border: 1px solid #dedede;-->
<!--background: #fff;-->
<!--h2.title {-->
<!--padding-left: 30px;-->
<!--font-size: 16px;-->
<!--line-height: 55px;-->
<!--border-bottom: 1px solid #DEDEDE;-->
<!--}-->
<!--.el-form {-->
<!--width: 527px;-->
<!--margin-top: 20px;-->
<!--}-->
<!--.save-btn {-->
<!--display: block;-->
<!--padding: 8px 2em;-->
<!--margin: 60px auto 0;-->
<!--background: #a00912;-->
<!--border: 0;-->
<!--&:hover {-->
<!--background: #c51b25;-->
<!--}-->
<!--}-->
<!--.avatar-uploader {-->
<!--position: absolute;-->
<!--top: 120px;-->
<!--right: 100px;-->
<!--}-->
<!--.avatar-uploader .el-upload {-->
<!--border: 1px dashed #d9d9d9;-->
<!--border-radius: 6px;-->
<!--cursor: pointer;-->
<!--position: relative;-->
<!--overflow: hidden;-->
<!--}-->
<!--.avatar-uploader .el-upload:hover {-->
<!--border-color: #20a0ff;-->
<!--}-->
<!--.avatar-uploader-icon {-->
<!--font-size: 28px;-->
<!--color: #8c939d;-->
<!--width: 178px;-->
<!--height: 178px;-->
<!--line-height: 178px;-->
<!--text-align: center;-->
<!--}-->
<!--.avatar {-->
<!--width: 178px;-->
<!--height: 178px;-->
<!--display: block;-->
<!--}-->
<!--}-->
<!--}-->
<!--.el-picker-panel {-->
<!--width: 350px !important;-->
<!--}-->
<!--</style>-->
